<template>
    <div class="index">
        <v-header token="admin" :title="getPageTitle()+'后台'" />
		<v-sidebar />
		<div class="content-box" :class="{ 'content-collapse': isCollapse }">
			<v-tags/>
			<div class="content">
			   <router-view v-slot="{ Component }">
				   <transition name="move" mode="out-in">
					   <keep-alive :include="tagsList">
						   <component :key="Component" :is="Component" />
					   </keep-alive>
				   </transition>
			   </router-view>
			</div>
		</div>
    </div>
</template>
<script setup>
import { computed, ref, reactive } from "vue";
import { useStore } from "vuex";
import vHeader from "../../components/admin/header.vue";
import vSidebar from "../../components/admin/sidebar.vue";
import vTags from "../../components/admin/Tags.vue";
import { getPageTitle } from '../../utils/getPageTitle.js'

const store = useStore();
const tagsList = computed(() =>
	store.state.tagsList.map((item) => item.name)
);
const isCollapse = computed(() => store.state.isCollapse);
</script>

<style lang="less" scoped>
	.index{
		width: 100%;height: 100%;
		.content-box{
			width: 100%;
			position: absolute;
			height:100%;box-sizing: border-box;padding-bottom: 105px;
			top: 70px;
			left: 200px;
			padding-right: 200px;
			-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
			.content{
				width: auto;
				height: 100%;
				padding: 10px;
				overflow-y: scroll;
				box-sizing: border-box;
			}
		}
	}
	.content-collapse{left: 64px !important;padding-right: 64px !important;}
	.move-enter-active,
	.move-leave-active {
	    transition: opacity .1s ease;
	}
	
	.move-enter-from,
	.move-leave-to {
	    opacity: 0;
	}
</style>
